<template>
	<div>
		<el-card>
			<div slot="header">
				<span>筛选搜索</span>
			</div>
			<el-row>
				<el-form label-width="auto">
					<el-col :span="6">
						<el-form-item label="用例名称：">
							<el-input v-model="serchCaseName" placeholder="请输入用例名称" clearable />
						</el-form-item>
					</el-col>
					<el-col :span="18">
						<el-form-item class="btn">
							<el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
							<el-button icon="el-icon-refresh-right" @click="reset">重置</el-button>
						</el-form-item>
					</el-col>
				</el-form>
			</el-row>
		</el-card>
		<div style="margin-top: 10px">
			<el-card>
				<div slot="header">
					<span>数据列表</span>
					<div>
						<el-button type="primary" style="margin-right: 15px" @click="dialogFormVisible = true"><i class="el-icon-plus">添加用例</i> </el-button>
						<el-button type="primary"> <i class="el-icon-delete" @click="deleteCase">删除用例</i></el-button>
					</div>
				</div>
				<!-- 后端未处理分页返回全部数据，前端模拟分页效果 -->
				<el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border style="width: 100%" fit highlight-current-row height="480px" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55" align="center" />
					<el-table-column v-for="item in columnList" :key="item.index" :prop="item.prop" :label="item.label" show-overflow-tooltip :min-width="120" align="center" />
					<el-table-column fixed="right" label="操作" align="center">
						<template slot-scope="scope">
							<div class="handle-container">
								<el-button type="text" size="small" @click="editCase(scope.row)">编辑</el-button>
								<el-tooltip effect="dark" content="运行用例" placement="top-start" class="icon">
									<svg-icon icon-class="start" style="margin-right: 5px"></svg-icon>
								</el-tooltip>
							</div>
						</template>
					</el-table-column>
				</el-table>
				<div class="base-pagination">
					<el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-size="pageSize" :page-sizes="[10, 20, 50, 100]" :current-page="currentPage" :total="tableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
				</div>
			</el-card>
		</div>
		<el-dialog title="添加/修改数据" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
			<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px">
				<el-form-item label="用例编号" prop="caseId">
					<el-input v-model.number="ruleForm.caseId" type="text" show-word-limit clearable :disabled="isUpdate" />
				</el-form-item>
				<el-form-item label="用例名称" prop="caseName">
					<el-input v-model="ruleForm.caseName" type="text" show-word-limit clearable />
				</el-form-item>
				<el-form-item label="用例入参" prop="caseInput">
					<el-input v-model="ruleForm.caseInput" type="text" show-word-limit clearable />
				</el-form-item>
				<el-form-item label="预期结果" prop="caseOutputExpected">
					<el-input v-model="ruleForm.caseOutputExpected" type="text" show-word-limit clearable />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import API from "@/api";
export default {
	data() {
		return {
			total: 0,
			currentPage: 1,
			pageSize: 10,
			serchCaseName: "",
			dialogFormVisible: false,
			isUpdate: false,
			ruleForm: {
				caseId: "",
				caseName: "",
				caseInput: "",
				caseOutputExpected: ""
			},
			rules: {
				caseId: [
					{ required: true, message: "用例编号不能为空", trigger: "blur" },
					{ type: "number", message: "用例编号必须为数值格式", trigger: "blur" }
				],
				caseName: [{ required: true, message: "用例名称不能为空", trigger: "blur" }],
				caseInput: [{ required: true, message: "用例入参不能为空", trigger: "blur" }],
				caseOutputExpected: [{ required: true, message: "预期结果不能为空", trigger: "blur" }]
			},
			tableData: [],
			columnList: [
				{ prop: "dt", label: "时区" },
				{ prop: "caseId", label: "用例编号" },
				{ prop: "caseName", label: "用例名称" },
				{ prop: "caseInput", label: "用例入参" },
				{ prop: "caseOutputExpected", label: "预期结果" },
				{ prop: "caseOutputReal", label: "实际结果" },
				{ prop: "caseIsSuccess", label: "是否通过" }
			],
			multipleSelection: []
		};
	},
	watch: {
		// 当不可见时需要清空表单
		dialogFormVisible(val) {
			if (!val) {
				this.$nextTick(() => {
					this.isUpdate = false;
					this.$refs.ruleForm.resetFields();
				});
			}
		}
	},
	created() {
		this.search();
	},
	methods: {
		// 查询
		search() {
			this.tableData = [];
			this.multipleSelection = [];
			this.currentPage = 1;
			API.searchCase({ caseName: this.serchCaseName })
				.then(({ success, data, message }) => {
					success ? (this.tableData = data) : this.$message.warning(message);
				})
				.catch(() => {
					this.$message.error("Error,服务端异常");
				});
		},
		// 重置
		reset() {
			this.serchCaseName = "";
			this.search();
		},
		// 提交
		async submit() {
			this.$refs.ruleForm.validate(async valid => {
				if (!valid) return false;
				try {
					const { success, message } = await API.addCase({ data: this.ruleForm, isUpdate: this.isUpdate });
					if (!success) {
						this.$message.error(message);
						return;
					}
					this.dialogFormVisible = false;
					this.$message.success(message);
					this.search();
				} catch {
					this.$message.error("服务端异常！");
				}
			});
		},
		// 回调赋值
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		// 删除
		async deleteCase() {
			if (!this.multipleSelection.length) {
				this.$message.warning("未选择需要删除的数据");
				return;
			}
			try {
				const caseIds = this.multipleSelection.map(i => i.caseId);
				const { success, message } = await API.deleteCase(caseIds);
				if (!success) {
					this.$message.error(message);
					return;
				}
				this.$message.success(message);
				this.search();
			} catch {
				this.$message.error("服务端异常！");
			}
		},
		editCase(row) {
			const { caseId, caseName, caseInput, caseOutputExpected } = row;
			this.isUpdate = true;
			this.ruleForm = { caseId, caseName, caseInput, caseOutputExpected };
			this.dialogFormVisible = true;
		},
		handleSizeChange(pageSize) {
			this.pageSize = pageSize;
		},
		handleCurrentChange(currentPage) {
			this.currentPage = currentPage;
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
	.el-dialog__title {
		font-size: 14px !important;
		font-weight: 700 !important;
	}
	.el-form-item__label {
		font-size: 12px !important;
	}
	.dialog-footer {
		.el-button {
			font-size: 12px !important;
		}
	}
}
::v-deep .el-button {
	font-size: 12px !important;
}
::v-deep .el-table--border {
	border: 1px solid #ebeef5;
	font-size: 12px;

	.el-table__header-wrapper {
		thead {
			tr {
				div {
					font-weight: 700 !important;
				}
			}
		}
	}
}
::v-deep .el-table {
	border-radius: 5px;
	thead {
		color: #909399;
	}
	tbody {
		color: #909399;
	}
}

.icon {
	width: 1.5em;
	height: 1.5em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
}
.svg-icon {
	margin-left: 10px;
	cursor: pointer;
}
.handle-container {
	display: flex;
	justify-content: center;
	align-items: center;
}
.btn {
	text-align: right;
}
::v-deep .el-card__header > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
</style>
